<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>鱼骨图形式信息展示</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<script src="../../libs/js/graphical/fishBone.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../libs/js/graphical/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.fishBone * {
				margin: 0;
				padding: 0;
			}
			
			.fishBone ul {
				overflow: visible!important;
			}
			
			.fishBone ul,
			li {
				list-style: none;
				line-height: 2em
			}
			
			.fishBone {
				color: #767676;
				width: 100%;
				height: 100%;
				white-space: nowrap;
				position: relative;
				font-size: 12px;
			}
			
			.fishBone .wrapper {
				padding: 0 10px;
				margin: auto;
				overflow: hidden;
			}
			
			.fishBone .wrapper .bd {
				overflow: hidden;
			}
			
			.fishBone .item {
				position: relative;
				width: 150px;
				height: 350px;
				display: inline-block;
				margin-left: 20px;
			}
			
			.fishBone .item .first {
				line-height: 2em;
			}
			
			.fishBone .item .title {
				border-left: none;
			}
			
			.fishBone .item .title .title-left {
				display: inline-block;
				width: 15px;
				line-height: 2.1em;
				background: url(../../sample_html/graphical/fishbone/title.png) no-repeat 0 0;
				font-size: 14px;
			}
			
			.fishBone .item .title .title-center {
				display: inline-block;
				background: url(../../sample_html/graphical/fishbone/title.png) repeat-x 0 -600px;
				font-size: 15px;
				font-weight: bold;
				font-family: '微软雅黑';
				line-height: 2.1em;
				color: white;
			}
			
			.fishBone .item .title .title-right {
				display: inline-block;
				width: 15px;
				line-height: 2.1em;
				background: url(../../sample_html/graphical/fishbone/title.png) no-repeat 0 -1200px;
				font-size: 14px;
			}
			
			.fishBone .item .title {
				display: block;
				position: relative;
				left: -33px;
				background: url(../../sample_html/graphical/fishbone/line-point.png) no-repeat 12px -212px;
			}
			
			.fishBone .item.top .title {}
			
			.fishBone .item.bottom .title {
				bottom: 0;
			}
			
			.fishBone .item .content {
				padding-left: 13px;
				position: absolute;
			}
			
			.fishBone .item.top .content {
				padding-top: 5px;
				top: 10px;
				padding-bottom: 13px;
			}
			
			.fishBone .item.bottom .content {
				bottom: 7px;
				padding-top: 10px;
				padding-bottom: 5px;
			}
			
			.fishBone .item.bottom {}
			
			.fishBone .item .content ul {}
			
			.fishBone .item .content ul li {
				padding-left: 13px;
			}
			
			.fishBone .item .content ul li.line-first {
				position: relative;
				padding-left: 19px;
				left: -4px;
				border-left: 0!important;
				background: url(../../sample_html/graphical/fishbone/line-first.png) no-repeat 0px 0px;
				font-size: 14px;
				font-weight: 550;
			}
			
			.fishBone .item .content ul li.line-last {
				border-left: none;
			}
			
			.fishBone .item.top .content ul li .name {}
			
			.fishBone .item.top .content ul li .text {}
			/**prev next*/
			
			.fishBone .prev {
				position: absolute;
				top: 155px;
				left: 0;
				display: inline-block;
				width: 20px;
				height: 40px;
				background: url(../../sample_html/graphical/fishbone/arrow.png) no-repeat -1px 13px;
			}
			
			.fishBone .prev:hover {
				cursor: pointer;
				background-position-y: -28px;
			}
			
			.fishBone .next:hover {
				cursor: pointer;
				background-position-y: -28px;
			}
			
			.fishBone .next {
				position: absolute;
				top: 154px;
				right: 10px;
				display: inline-block;
				width: 20px;
				height: 40px;
				background: url(../../sample_html/graphical/fishbone/arrow.png) no-repeat -19px 13px;
			}
			/**line**/
			
			.fishBone .line {
				position: absolute;
				top: 175px;
				height: 1px;
				width: 100%;
				border-bottom: 2px dashed #7E899D;
				z-index: -1;
			}
			
			.fishBone .item .line-point {
				position: absolute;
				left: 4px;
				bottom: -4px;
				display: block;
				height: 18px;
				width: 18px;
				background: url(../../sample_html/graphical/fishbone/line-point.png) no-repeat 0px 0px;
			}
			
			.fishBone .item.bottom .line-point {
				top: -6px
			}
		</style>
		<script>
			data = [{ 
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+' 
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+' 
			}, {
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+' 
			}, {
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+' 
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2017-6-04', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Touch UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}, { 
				'发布时间': '2014-6-20', 
				'公司名称': '北京引领视觉科技有限公司', 
				'公司产品': 'Quick UI',
				'公司地址': '北京市', 
				'公司电话': '010-123456', 
				'公司人员': '50+'
			}];
			$(function() {
				//创建案件历史
				$(".fishBone").fishBone(data);
			});
		</script>
	</head>

	<body>
		<div class="container">
			<div class="fishBone"></div>
		</div>

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		</div>
	</body>

</html>